<template>
    <div class="app-container home">
        <el-row>
            <el-col :lg="24" style="margin-bottom: 15px">
                <el-card class="update-log">
                    <div class="top">
                        <div class="top_left">
                            <div><img src="@/assets/images/profile.jpg" /></div>
                            <div class="top_name">
                                <div>早安，{{ userName }}，祝你开心每一天！</div>
                                <div>超级管理员 | xxxx公司－实验负责人</div>
                            </div>
                        </div>
                        <div class="top-right">
                            <div>
                                <div>学校数量</div>
                                <div>1</div>
                            </div>
                            <div>
                                <div>实验数量</div>
                                <div>1</div>
                            </div>
                            <div>
                                <div>售出器材数量</div>
                                <div>24</div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 15px">
            <el-col :lg="24">
                <el-card class="update-log">
                    <div slot="header" class="clearfix">
                        <span>学校到期时间 {{ schoolData.lifespan }}</span>
                        <span style="margin-left: 20px">本月平台运行情况 2024-05-01 - 2024-05-31</span>
                    </div>
                    <div class="operation">
                        <div class="num">
                            <div>学校数量 (所)</div>
                            <div>56</div>
                            <div>
                                <div>
                                    环比
                                    <i class="el-icon-top"></i>
                                    20.5%
                                </div>
                                <div class="el-icon-arrow-right"></div>
                            </div>
                        </div>
                        <div class="num">
                            <div>学校数量 (所)</div>
                            <div>56</div>
                            <div>
                                <div>
                                    环比
                                    <i class="el-icon-bottom"></i>
                                    20.5%
                                </div>
                                <div class="el-icon-arrow-right"></div>
                            </div>
                        </div>
                        <div class="num">
                            <div>学校数量 (所)</div>
                            <div>56</div>
                            <div>
                                <div>
                                    环比
                                    <i class="el-icon-top"></i>
                                    20.5%
                                </div>
                                <div class="el-icon-arrow-right"></div>
                            </div>
                        </div>
                        <div class="num">
                            <div>学校数量 (所)</div>
                            <div>56</div>
                            <div>
                                <div>
                                    环比
                                    <i class="el-icon-top"></i>
                                    20.5%
                                </div>
                                <div class="el-icon-arrow-right"></div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :lg="24">
                <el-card class="update-log">
                    <div class="echart">
                        <div>商品询价趋势(箱)</div>
                        <div>
                            <el-date-picker v-model="updateTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" />
                        </div>
                    </div>
                    <div><line-chart :chart-data="lineChartData" /></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import LineChart from '@/views/dashboard/LineChart.vue';
import { getSchoolByLogin } from '@/api/business/school';
export default {
    components: { LineChart },
    name: 'Index',
    data() {
        return {
            lineChartData: {},
            updateTime: '',
            schoolData: []
        };
    },
    computed: {
        userName() {
            return this.$store.getters.name; // 使用 Vuex 的 getter 获取用户姓名
        }
    },
    created() {
        this.getLine();
        this.getSchoolByLoginFc();
    },
    methods: {
        getSchoolByLoginFc() {
            getSchoolByLogin().then(({ data }) => {
                this.schoolData = data;
                const currentDate = new Date();
                const targetDateTime = new Date(data.lifespan);
                if (targetDateTime < currentDate) {
                    this.$alert('到期时间为：' + data.lifespan, data.schoolName + '已到期', {
                        dangerouslyUseHTMLString: true
                    });
                }
            });
        },
        goTarget(href) {
            window.open(href, '_blank');
        },
        getLine() {
            const lineChartData = {
                newVisitis: {
                    expectedData: [100, 120, 161, 134, 105, 160, 165],
                    actualData: [120, 82, 91, 154, 162, 140, 145]
                },
                messages: {
                    expectedData: [200, 192, 120, 144, 160, 130, 140],
                    actualData: [180, 160, 151, 106, 145, 150, 130]
                },
                purchases: {
                    expectedData: [80, 100, 121, 104, 105, 90, 100],
                    actualData: [120, 90, 100, 138, 142, 130, 130]
                },
                shoppings: {
                    expectedData: [130, 140, 141, 142, 145, 150, 160],
                    actualData: [120, 82, 91, 154, 162, 140, 130]
                }
            };
            this.lineChartData = lineChartData.newVisitis;
        }
    }
};
</script>

<style scoped lang="scss">
.home {
    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        .top_left {
            display: flex;
            align-items: center;
            img {
                border-radius: 50%;
                width: 50px;
            }
            .top_name {
                margin-left: 20px;
                > div {
                    color: #000;
                    font-size: 16px;
                    &:last-child {
                        margin-top: 10px;
                        color: #676a6c;
                    }
                }
            }
        }
        .top-right {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #676a6c;
            font-size: 14px;
            width: 400px;
            > div {
                flex: 1;
                text-align: center;
                &:nth-child(2) {
                    border-left: 1px solid #ddd;
                    border-right: 1px solid #ddd;
                }
                > div {
                    &:last-child {
                        margin-top: 10px;
                        color: #000;
                        font-size: 25px;
                    }
                }
            }
        }
    }
    .operation {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .num {
            &:hover {
                background: #d8d8d8;
            }
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 5px;
            color: #676a6c;
            flex: 1;
            &:not(:last-child) {
                margin-right: 15px;
            }
            > div {
                margin-bottom: 15px;
                &:nth-child(2) {
                    font-size: 26px;
                    color: #000;
                }
                &:nth-child(3) {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
            }
        }
    }
    .echart {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>
